<template>
	<view style="padding: 50upx;background-color: #EBEBEB;">
		<input :min="6" :max="30" v-model="username" class="input" placeholder="请输入账号/用户名"></input>
		<picker mode=selector @change="bindPickerChange" style="color: #666666" class="input" :range="questions" placehoFlder="请输入密保问题">
			<view>{{passwordQuestion}}</view>
		</picker>
		<input :required="true" :min="2" :max="30" class="input" v-model="passwordAnswer" placeholder="请输入验证答案"></input>
		<input type="password" v-model="password" :min="6" :max="30" class="input" placeholder="请输入新密码"></input>
		<view style="display: flex;justify-content: space-between;">
			<input :min="4" class="input" v-model="captcha" placeholder="请输入验证码" style="width: 170px;"></input>
			<img :src="captchaPath" height="38" @click="getCaptcha()" alt="" style='margin-top: 2px;'>
		</view>
		<button type="primary" @click="submit">提交</button>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		name: 'forgetPass',
		data() {
			return {
				uuid: '',
				captcha: '',
				captchaPath: '',
				username: '',
				passwordQuestion: '',
				passwordAnswer: '',
				password: '',
				questions: ['您小学的名字？', '您父亲的名字？', '您母亲的名字？', '您最喜欢的书？', '您最喜欢的书？'],
				index: 0,
			}
		},
		onLoad() {
			this.submit()
			this.passwordQuestion = this.questions[0]
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			bindPickerChange: function(e) {
				let index = e.detail.value
				this.passwordQuestion = this.questions[index]
			},
			getUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			},
			getCaptcha() {
				this.uuid = this.getUUID()
				// this.captchaPath = "http://39.105.185.57:9002/mobileapi/mobile/captcha.jpg?uuid=" + this.uuid
				this.captchaPath = 'http://192.168.10.43:9002/mobileapi/mobile/captcha.jpg?uuid=' + this.uuid
			},
			submit() {
				if (this.username == '') {
					uni.showToast({
						title: '请输入账号/用户名',
						icon: 'none'
					});
					return;
				}
				if (this.passwordAnswer == '') {
					uni.showToast({
						title: '请输入验证答案',
						icon: 'none'
					});
					return;
				}
				if (this.captcha == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				const params = {
					uuid: this.uuid,
					captcha: this.captcha,
					username: this.username,
					passwordQuestion: this.passwordQuestion,
					passwordAnswer: this.passwordAnswer,
					password: this.password,
				}
				post('mobileapi/mobile/member/usercenter/forgetUserPassword', params).then(res => {
					if (res.code === 0) {
						uni.switchTab({
							url: '/pages/me/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>
<style>
	.input {
		background: white;
	}
</style>
